<template>
  <div class="settle-in-supplier">
    <!--<div class="each-supplier"-->
         <!--v-for="item in 20"-->
         <!--:key="item">-->
      <!--<img src="../../../assets/image/settleIn/pic3.png"-->
           <!--alt=""-->
           <!--width="200"-->
           <!--height="70">-->
      <!--<div class="supplier-name">内蒙古利丰企业集团有限公司</div>-->
    <!--</div>-->
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  activated () {

  },
  deactivated () {

  }
}
</script>

<style lang="less" scoped>
@media screen and (max-width: 1366px) {
  .settle-in-supplier {
    .mainViewAreaStyle();
    width: 1280px;
    .each-supplier {
      width: 320px;
      padding-top: 17px;
      padding-bottom: 27px;
      img {
        margin-bottom: 10px;
      }
    }
    .supplier-name {
      width: 320px;
    }
  }
}
@media screen and (max-width: 2306px) {
  .settle-in-supplier {
    .mainViewAreaStyle();
    width: 1192px;
    .each-supplier {
      width: 298px;
      padding-top: 17px;
      padding-bottom: 20px;
      img {
        margin-bottom: 10px;
      }
    }
    .supplier-name {
      width: 298px;
    }
  }
}
.settle-in-supplier {
  padding-top: 60px;
  margin-bottom: 80px;
  overflow: hidden;
  .each-supplier {
    height: 138px;
    background: #f3f4f8;
    position: relative;
    display: inline-block;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 20px;
    transition: all 0.3s;
    cursor: pointer;
    &:nth-child(5n) {
      margin-right: 0;
    }
    .supplier-name {
      height: 20px;
      font-size: 14px;
      text-align: center;
      transition: all 0.3s;
      position: absolute;
      left: 0;
      bottom: 27 px;
      .textOverflow();
    }
  }
  .each-supplier:hover {
    background: #fff;
    box-shadow: 0px 2px 24px 0px rgba(230, 235, 248, 0.5);
    .supplier-name {
      color: @activeRed;
    }
  }
}
</style>
